﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/assets/libs/layui/css/layui.css" />
    <link rel="stylesheet" href="/assets/module/admin.css">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style media="screen">
        .tree-txt-active {
            color: rgb(0, 150, 136);
        }
    </style>
</head>
<body>

    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-row">
                    <div class="layui-col-sm4 layui-col-md2">

                        
                      
                        <div class="layui-card">
                            <div class="layui-card-header" style="background:#eeeeee;font-weight:bold;font-size:medium">部门&nbsp;
                           <!--<a id="btnAddOne" class="layui-btn layui-btn-sm icon-btn" lay-event="addOne"><i class="layui-icon">&#xe654;</i></a><a id="btnEditOne" class="layui-btn layui-btn-warm layui-btn-sm icon-btn" lay-event="editOne"><i class="layui-icon">&#xe642;</i></a><a id="btnDeleteOne" class="layui-btn layui-btn-danger layui-btn-sm icon-btn" lay-event="delOne"><i class="layui-icon">&#xe640;</i></a>-->
                            </div>
                            
                            <div class="layui-card-body">
                                <div id="tree" class="demo-tree demo-tree-box"></div>
                            </div>
                        </div>
                   </div>
                        <div class="layui-col-sm8 layui-col-md10">
                            <!-- 表格工具栏 -->
                            <form class="layui-form toolbar" lay-filter="userTbSearchForm">
                                <input type="hidden" id="QueryDepartmentId" name="QueryDepartmentId" />
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">用户名:</label>
                                        <div class="layui-input-inline">
                                            <input name="UserName" class="layui-input" placeholder="输入用户名" />
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">手机号:</label>
                                        <div class="layui-input-inline">
                                            <input name="Mobile" class="layui-input" placeholder="输入手机号" maxlength="11" />
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">用户状态:</label>
                                        <div class="layui-input-inline">
                                            <select name="UserStatus">
                                                <option value="">可选择</option>
                                                <option value="1">启用</option>
                                                <option value="0">禁用</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        &emsp;
                                        <button class="layui-btn icon-btn" lay-filter="userTbSearch" id="userTbSearch" lay-submit>
                                            <i class="layui-icon">&#xe615;</i>搜索
                                        </button>
                                    </div>
                                </div>
                            </form>
                            <!-- 数据表格 -->
                            <table id="userTable" lay-filter="userTable"></table>

                        </div>
                    </div>
            </div>
        </div>
    </div>

    <!-- 表格操作列 -->
    <script type="text/html" id="toolbar">
        <a id="btnAdd" class="layui-btn layui-btn-sm icon-btn" lay-event="add"><i class="layui-icon">&#xe654;</i>新增</a>
        <a id="btnEdit" class="layui-btn layui-btn-warm layui-btn-sm icon-btn" lay-event="edit"><i class="layui-icon">&#xe642;</i>修改</a>
        <a id="btnDelete" class="layui-btn layui-btn-danger layui-btn-sm icon-btn" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
    </script>
    <script type="text/html" id="userTbBar">
        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="reset">重置密码</a>
    </script>
    <!-- 表格状态列 -->
    <script type="text/html" id="userTbState">
        <input type="checkbox" lay-filter="userTbStateCk" value="{{d.Id}}" lay-skin="switch"
               lay-text="正常|锁定" {{d.UserStatus==1?'checked':''}} style="display: none;" />
        <p style="display: none;">{{d.state==1?'正常':'锁定'}}</p>
    </script>
    <!-- 表单弹窗 -->
    <script type="text/html" id="userEditDialog">
        <form id="userEditForm" lay-filter="userEditForm" class="layui-form model-form">
            <input name="userId" type="hidden" />
            <div class="layui-col-sm5">
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">登录名:</label>
                    <div class="layui-input-block">
                        <input name="UserName" placeholder="请输入登录名称" class="layui-input" autocomplete="off"
                               lay-verType="tips" lay-verify="required" required />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">姓名:</label>
                    <div class="layui-input-block">
                        <input name="RealName" placeholder="请输入姓名" class="layui-input" autocomplete="off"
                               lay-verType="tips" lay-verify="required" required />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">性别:</label>
                    <div class="layui-input-block">
                        <input type="radio" name="Gender" value="1" title="男" checked />
                        <input type="radio" name="Gender" value="2" title="女" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">生日:</label>
                    <div class="layui-input-block">
                        <input name="Birthday" class="layui-input" readonly
                               lay-verType="tips" lay-verify="required" required />
                    </div>
                </div>
            </div>
            <div class="layui-col-sm7">
                <div class="layui-form-item">
                    <label class="layui-form-label">手机号:</label>
                    <div class="layui-input-block">
                        <input name="Mobile" placeholder="请输入手机号" class="layui-input" autocomplete="off"
                               lay-verType="tips" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label ">职位:</label>
                    <div class="layui-input-block">
                        <div id="userEditPositionSel"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">部门:</label>
                    <div class="layui-input-block">
                        <div id="userEditDepartmentSel" class="ew-xmselect-tree"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">角色:</label>
                    <div class="layui-input-block">
                        <div id="userEditRoleSel"></div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">备注:</label>
                <div class="layui-input-block">
                    <textarea name="Remark" class="layui-textarea" lay-verType="tips" ></textarea>
                </div>
            </div>
            <div class="layui-form-item text-right">
                <button class="layui-btn" lay-filter="userEditSubmit" lay-submit>保存</button>
                <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            </div>
        </form>
    </script>



    <!-- js部分 -->
    <script src="/assets/libs/jquery/jquery-3.2.1.min.js"></script>
    <script src="/assets/libs/layui/layui.js"></script>
    <script src="/assets/js/utils.js"></script>
    <script src="/assets/js/main.js"></script>
    <script>
        layui.use(['layer', 'form', 'table', 'util', 'admin', 'xmSelect', 'laydate', 'tree', 'treeTable'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;
            var table = layui.table;
            var util = layui.util;
            var admin = layui.admin;
            var xmSelect = layui.xmSelect;
            var setter = layui.setter;
            var laydate = layui.laydate;
            var tree = layui.tree;
            var treeTable = layui.treeTable;

            layuiTableSet();

            form.render('select', 'userTbSearchForm');

            var roles;
            var positions;
            var ztreeInfo;

            // 初始化时就需要获取下拉菜单的一些数据
            admin.req('/OrganizationManage/User/UserPageLoad', function (res) {
                if (res.Tag === 1) {
                    roles = res.Data.roles;
                    positions = res.Data.positions;
                    ztreeInfo = res.Data.ztreeInfo;

                    var _ztreeInfo = admin.util.deepClone(ztreeInfo)
                    setDepartmentData(_ztreeInfo);
                    //常规用法
                    tree.render({
                        elem: '#tree' //默认是点击节点可进行收缩
                        , onlyIconControl: true
                        , data: _ztreeInfo
                        , click: function (obj) {
                             
                            var bid = obj.data.id;
                            $("#QueryDepartmentId").val(bid);
                           
                        }
                    });
                } else {
                    layer.msg(res.Message, { icon: 2 });
                }
            }, 'get');

            /* 渲染表格 */
            var insTb = table.render({
                elem: '#userTable',
                url: layui.setter.baseServer + '/OrganizationManage/User/GetPageListJson',
                page: true,
                toolbar: '#toolbar',
                cellMinWidth: 100,
                cols: [[
                    { type: 'checkbox' },
                    { type: 'numbers' },
                    { field: 'Id', title: 'Id', visible: false },
                    { field: 'UserName', title: '登录名', sortable: true },
                    { field: 'RealName', title: '姓名', sortable: false },
                    { field: 'DepartmentName', title: '部门', sortable: false },
                    { field: 'Mobile', title: '手机', sortable: false },
                    {
                        field: 'BaseModifyTime', title: '创建时间', templet: function (d) {
                            return util.toDateString(d.BaseModifyTime);
                        }, sort: true
                    },
                    { field: 'state', title: '状态', templet: '#userTbState', sort: true, width: 100 },
                    { title: '操作', toolbar: '#userTbBar', align: 'center', width: 100 }
                ]]
            });

            /* 表格搜索 */
            form.on('submit(userTbSearch)', function (data) {
                insTb.reload({ where: data.field, page: { curr: 1 } });
                return false;
            });

            /* 表格工具条点击事件 */
            table.on('tool(userTable)', function (obj) {
                if (obj.event === 'reset') { // 重置密码
                    resetPsw(obj);
                }
            });

            /* 表格头工具栏点击事件 */
            table.on('toolbar(userTable)', function (obj) {
                if (obj.event === 'add') { // 添加
                    showEditModel();
                } else if (obj.event === 'del') { // 删除
                    var checkRows = table.checkStatus('userTable');
                    if (checkRows.data.length === 0) {
                        layer.msg('请选择要删除的数据', { icon: 2 });
                        return;
                    }
                    var ids = checkRows.data.map(function (d) {
                        return d.Id;
                    });
                    doDel({ ids: ids });
                } else if (obj.event === 'edit') { // 修改
                    var checkRows = table.checkStatus('userTable');
                    if (checkRows.data.length === 0 || checkRows.data.length > 1) {
                        layer.msg('请选择且只选择一条数据', { icon: 2 });
                        return;
                    }
                    showEditModel(checkRows.data[0]);
                }
            });

            var ChangeId = 0;
            /* 显示表单弹窗 */
            function showEditModel(mData) {
                admin.open({
                    type: 1,
                    title: (mData ? '修改' : '添加') + '用户',
                    content: $('#userEditDialog').html(),
                    area: ["688px"],
                    success: function (layero, dIndex) {

                        laydate.render({ elem: '#userEditForm input[name=Birthday]', format: 'yyyy-MM-dd' });

                        // 回显表单数据
                        form.val('userEditForm', mData);

                        ChangeId = mData ? mData.Id : 0;

                        // 表单提交事件
                        form.on('submit(userEditSubmit)', function (data) {
                            data.field.RoleIds = insRoleSel.getValue('valueStr');
                            data.field.PositionIds = insRoleSel2.getValue('valueStr');
                            data.field.Id = ChangeId;
                            data.field.DepartmentId = insXmSel.getValue('valueStr');

                            var loadIndex = layer.load(2);
                            admin.req('/OrganizationManage/User/SaveFormJson', data.field, function (res) {
                                layer.close(loadIndex);
                                if (res.Tag === 1) {
                                    layer.close(dIndex);
                                    layer.msg("操作成功", { icon: 1 });
                                    insTb.reload({ page: { curr: 1 } });
                                } else {
                                    layer.msg(res.Message, { icon: 2 });
                                }
                            }, 'post');
                            return false;
                        });

                        var insRoleSel;
                        var insRoleSel2;

                        // 获取用户关联信息
                        admin.req('/OrganizationManage/User/GetUserDlcInfo', { userId: ChangeId }, function (res) {
                            if (res.Tag === 1) {
                                // 渲染多选下拉框
                                insRoleSel = xmSelect.render({
                                    el: '#userEditRoleSel',
                                    name: 'userEditRoleSel',
                                    layVerify: 'required',
                                    layVerType: 'tips',
                                    data: roles,
                                    prop: { name: "RoleName", value: "Id" }
                                });
                                insRoleSel2 = xmSelect.render({
                                    el: '#userEditPositionSel',
                                    name: 'userEditPositionSel',
                                    layVerify: 'required',
                                    layVerType: 'tips',
                                    data: positions,
                                    prop: { name: "PositionName", value: "Id" }
                                });

                                // 回显选中
                                insRoleSel.setValue(res.Data.RoleIds.split(","));
                                insRoleSel2.setValue(res.Data.PositionIds.split(","));
                                
                            } else {
                                layer.msg(res.Message, { icon: 2 });
                            }
                        }, 'get');

                        // 渲染下拉树
                        var insXmSel = xmSelect.render({
                            el: '#userEditDepartmentSel',
                            height: '250px',
                            data: ztreeInfo,
                            initValue: mData ? [mData.DepartmentId] : [],
                            model: { label: { type: 'text' } },
                            prop: {
                                name: 'DepartmentName',
                                value: 'Id'
                            },
                            radio: true,
                            clickClose: true,
                            tree: {
                                show: true,
                                indent: 15,
                                strict: false,
                                expandedKeys: true
                            }
                        });

                        // 禁止弹窗出现滚动条
                        $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    }
                });
            }

            /* 删除 */
            function doDel(obj) {
                layer.confirm('确定要删除选中数据吗？', {
                    skin: 'layui-layer-admin',
                    shade: .1
                }, function (i) {
                    layer.close(i);
                    var loadIndex = layer.load(2);
                    admin.req('/OrganizationManage/User/DeleteFormJson',  obj.ids.join(','), function (res) {
                        layer.close(loadIndex);
                        if (res.Tag === 1) {
                            layer.msg('操作成功', { icon: 1 });
                            insTb.reload({ page: { curr: 1 } });
                        } else {
                            layer.msg(res.Message, { icon: 2 });
                        }
                    }, 'post');
                });
            }

            /* 修改用户状态 */
            form.on('switch(userTbStateCk)', function (obj) {
                var loadIndex = layer.load(2);
                admin.req('/OrganizationManage/User/ChangeUserState', {
                    Id: obj.elem.value,
                    UserStatus: obj.elem.checked ? 1 : 0
                }, function (res) {
                    layer.close(loadIndex);
                    if (res.Tag == 1) {
                        layer.msg('操作成功', { icon: 1 });
                    } else {
                        layer.msg(res.Message, { icon: 2 });
                        $(obj.elem).prop('checked', !obj.elem.checked);
                        form.render('checkbox');
                    }
                }, 'post');
            });

            /* 重置密码 */
            function resetPsw(obj) {
                layer.prompt({
                    formType: 1,
                    maxlength: 20,
                    title: '新密码'
                }, function (value, index, elem) {
                    layer.close(index);
                        var loadIndex = layer.load(2);
                        admin.req('/OrganizationManage/User/ResetPasswordJson', {
                        Id: obj.data.Id, Password: value
                    }, function (res) {
                        layer.close(loadIndex);
                        if (res.Tag == 1) {
                            layer.msg("操作成功", { icon: 1 });
                        } else {
                            layer.msg(res.Message, { icon: 2 });
                        }
                    }, 'post');
                });
            }

            $(document).click(function (e) { // 在页面任意位置点击而触发此事件
                if ($(e.target).attr('class') === "layui-tree-txt") { // 防止因为点击展开按钮把已选中的样式取消

                    $(".layui-tree-txt").removeClass("tree-txt-active"); // 移除点击样式

                    $(e.target).addClass("tree-txt-active"); // e.target表示被点击的目标
                    $("#userTbSearch").click();

                }
                else if ($(e.target).attr('class') === "layui-tree-txt tree-txt-active") {
                    $(".layui-tree-txt").removeClass("tree-txt-active"); // 移除点击样式
                    $("#QueryDepartmentId").val("");
                    $("#userTbSearch").click();
                }
                else {

                }
                
            });
        });


        // 修改数据为layui tree所设定的格式
        function setDepartmentData(list) {
            list.map(function (d) {
                d.id = d.Id;
                d.title = d.DepartmentName;
                d.spread = d.ParentId == null ? true : false;
                if (d.children && d.children.length > 0) {
                    setDepartmentData(d.children);
                }
            });
        }
    </script>

</body>
</html>